<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="../../vue.js"></script>
    <title>Document</title>
</head>

<body>
    <!-- 
        几个注意点:
            1.关于组件名:
                一个单词组成:
                    第一种写法(首字母小写): school
                    第二种写法(首字母大写): School
                两个单词组成:
                    第一种写法(kebab-case命名): my-school
                    第二种写法(CameCase命名): MySchool (需要在Vue脚手架中使用)
                备注:
                    (1).组件名避免和HTML已有元素名称, 例如: h2,H2 都不行
                    (2).可以使用name配置项指定组件在开发者工具中呈现的名字
            
            2.关于组件标签:
                第一种写法: <school></school>
                第二种写法: <school />
                备注: 不使用脚手架时, <school />会导致后续组件不能渲染
            
            3.一个简写方式:
                const school = Vue.extend(option) ==> const school = option
     -->
    <div id="root">
        <xingming></xingming>
    </div>
</body>
<script>
    // 定义组件
    const youName = {
        name: 'aaa',
        template: `
                <h2>{{yourName}}</h2>
            `,
        data() {
            return {
                yourName: '张三'
            }
        }
    }
    new Vue({
        // 注册组件
        components: {
            xingming: youName
        }
    }).$mount('#root')
</script>

</html>